import React, { useRef } from 'react';
import { Permission } from '@/types/sys-type';
import { factory } from '@/utils/column';
import { SuperTable, SuperTableProps } from '@/components/SuperTable';
import { Button, Card, Flex } from 'antd';
import { BetaSchemaForm, ProFormInstance } from '@ant-design/pro-form';
import { PageContainer } from '@ant-design/pro-layout';

export default () => {
  const columns: SuperTableProps<Permission, any>['columns'] = [
    ... factory.getAbstractIdBaseEntityColumns() as any,
    {
      dataIndex: 'resourceType',
      title: '资源类型',
      width: 200,
      valueType: 'select',
      fieldProps: { placeholder: '请选中资源类型' },
      formItemProps: {
        // rules: [ { required: true, message: '必填校验' } ],
        style: {
          width: '100%',
        },
      },
      renderFormItem: () => <Button>xxx</Button>
    },
    { dataIndex: 'name', title: '权限名称', width: 200 },
    { dataIndex: 'code', title: '权限代码', width: 200 },
    { dataIndex: 'describe', title: '描述', valueType: 'text', hideInSearch: true, width: 300, ellipsis: true },
  ];

  const instance = SuperTable.useTableRef();
  const formRef = useRef<ProFormInstance>();
  // const [form] = ProForm.useForm();

  return <>
    <PageContainer>
      <Card>
        <BetaSchemaForm
          title='ccccc存储'
          columns={ columns as any }
          formRef={ formRef } // readonly
          grid colProps={ { span: 12 } }
          layout="horizontal" layoutType='DrawerForm'
          wrapperCol={ { xs: { span: 24 }, sm: { span: 16 } } }
          labelCol={ { xs: { span: 24 }, sm: { span: 8 } } }
          trigger={<Button>新增</Button>}
          submitter={{
            onSubmit: (values) => {
              console.log(values)
            },
            render: (_, dom) => {
              return <Flex gap='small' justify='flex-end' style={{textAlign: 'right'}}>{dom}</Flex>
            }
          }}
        />
      </Card>
      {/*  <SuperTable<Permission>*/ }
      {/*    scroll={ { x: 500 } }*/ }
      {/*    columns={ columns }*/ }
      {/*    formRef={formRef}*/ }
      {/*    form={ {*/ }
      {/*      style: {*/ }
      {/*        backgroundColor: 'red',*/ }
      {/*      },*/ }
      {/*      // readonly: true,*/ }
      {/*      initialValues: {describe: '1'},*/ }
      {/*      layout: 'horizontal',*/ }
      {/*      colProps: { span: 12 },*/ }
      {/*      rowProps: { gutter: 228 },*/ }
      {/*      grid: true,*/ }
      {/*      labelCol: {*/ }
      {/*        xs: { span: 24 },*/ }
      {/*        sm: { span: 8 },*/ }
      {/*      },*/ }
      {/*      // 组件Node*/ }
      {/*      wrapperCol: {*/ }
      {/*        xs: { span: 24 },*/ }
      {/*        sm: { span: 16 },*/ }
      {/*      },*/ }
      {/*      submitter: {*/ }
      {/*        onSubmit: (value) => {*/ }
      {/*          console.log(value);*/ }
      {/*          console.log(formRef.current?.getFieldsValue());*/ }
      {/*        }*/ }
      {/*      },*/ }
      {/*      // loading: true,*/ }
      {/*    } } type="form" container={ { breadcrumbRender: false } } />*/ }
    </PageContainer>
    <SuperTable<Permission>
      container={ { style: { display: 'none' } } }
      onSubmit={ (params) => {
        console.log('xxx', params);
      } }
      columns={ columns } instance={ instance }
      request={ () => {
        return new Promise(resolve => {
          setTimeout(() => {
            const data: Permission[] = [];
            for (let i = 0; i < 1000; i++) {
              data.push({
                id: `${ i }`,
                resourceType: '测试',
                name: '权限名称',
                code: 'code',
                describe: '这是一个比较长的描述',
              });
            }
            resolve({
              data,
              success: true,
              total: 1000,
            });
          }, 1500);
        });
      } }
      toolBarRender={
        () => [
          <Button
            type="primary"
            onClick={
              () => {
                // console.log(ref?.current?.getSelectedRowKeys());
                // ref.current?.clearSelected();
                // console.log(instance.current.getSelectedRows());
                // instance.current.clearSelected?.();
                // instance.current.addEditRecord({id: '3'});
              }
            }>Ref测试</Button>,
        ]
      }
    />
  </>;
}